<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" id="viewport" content="target-densitydpi=1,width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1" />
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <title>课程页面</title>
    <style type="text/css">
        #myClass tr {
            text-align: center;
        }
        #myClass .table>tbody>tr:hover {
            background: blue;
        }
    </style>
</head>
<body background="/images/bk1.jpg">
    <div class="container">
        <div style="text-align: center"><span style="font-size: 30px;"><b>课程列表页</b></span></div>
        <table id='myClass' class="table table-hover" style="margin-top: 10px">
            <thead>
                <tr>
                    <td colspan="2" style="font-size:20px;text-align: left"><b>课程列表</b></td>
                </tr>
                <tr>
                    <td>#</td>
                    <td>课程名词</td>
                    <td>课程简介</td>
                    <td>讲师名称</td>
                    <td>评价</td>
                    <td>评价详情</td>
                </tr>
            </thead>
            <tbody id="mybody">

            </tbody>
        </table>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">评价窗口</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="classId">
                    <input type="hidden" id="userId">
                    <div style="margin-bottom: 10px">
                        <b style="font-size: 15px;margin-right: 10px">评分:</b>
                        <input id="modelGrade" type="text"  onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入数字" />
                    </div>
                    <div>
                        <b style="font-size: 15px">评价:</b>
                        <textarea id="modelText" style="height: 200px;width: 98%"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" id="savebtn" class="btn btn-primary" onclick="saveModel()">Sumbit</button>
                </div>
            </div>
        </div>
    </div>

</body>
    <script type="text/javascript">
        $(function () {
            classList();
        });
        function classList() {
            $.ajax({
                type:'POST',
                url:"/login/classList",
                dataType:'json',
                success: function (data) {
                    var list = data.list;
                    var text = '';
                    for (var i = 0; i < list.length; i++) {
                        text += '<tr>';
                        text += '<td>'+list[i].id+'</td>';
                        text += '<td>'+list[i].className+'</td>';
                        text += '<td>'+list[i].classInfo+'</td>';
                        text += '<td>'+list[i].teacherName+'</td>';
                        text += '<td><a onclick="showModel(\''+list[i].id+'\',\''+data.id+'\')">评价</a></td>';
                        text += '<td><a href="/login/appraise?id='+list[i].id+'">评价详情</a></td>';
                        text += '</tr>';
                    }
                    $('#mybody').html(text);
                }
            });
        }
        function showModel(classId,userId) {
            $('#myModal').modal('toggle');
            $('#classId').val(classId);
            $('#userId').val(userId);
            $.ajax({
                type:'POST',
                url:"/login/appraiseClass",
                data:{"classId":classId,"userId":userId},
                dataType:'json',
                success: function (data) {
                    var info = data.info;
                    if(info != null) {
                        $('#modelText').val(info.appraiseInfo);
                        $('#modelGrade').val(info.grade);
                        $('#modelText').attr("readonly","readonly");
                        $('#modelGrade').attr("readonly","readonly");
                        $('#savebtn').attr("disabled","disabled");
                        var text = $('#myModalLabel').html();
                        text += '<span style="color: red">(已评价)</span>';
                        $('#myModalLabel').html(text);
                    } else {
                        $('#modelText').removeAttr("readonly");
                        $('#modelGrade').removeAttr("readonly");
                        $('#modelText').val('');
                        $('#modelGrade').val('');
                        $('#savebtn').removeAttr("disabled");
                        $('#myModalLabel').html('评价窗口');
                    }
                }
            });
        }



        function saveModel() {
            var classId = $('#classId').val();
            var userId = $('#userId').val();
            var text = $('#modelText').val();
            var grade = $('#modelGrade').val();
            if (grade == '') {
                alert('分数不得为空');
                return;
            } else if (grade < 0 || grade > 100) {
                $('#modelGrade').val('');
                alert('请输入0-100的分数');
                return;
            }
            $.ajax({
                type:'POST',
                url:"/login/saveAppraise",
                data:{"classId":classId,"userId":userId,"appraiseInfo":text,"grade":grade},
                dataType:'json',
                success: function (data) {
                    var result = data.result;
                    if (result == 'success') {
                        $('#myModal').modal('hide');
                        alert("评价成功!");
                        $('#modelText').val('');
                        $('#modelGrade').val('');
                    } else {
                        alert("评价失败!");
                    }
                }
            });
        }

    </script>
</html>